import React from 'react';
// useNavigate函数，用于路由跳转
import {useNavigate,Link} from 'react-router-dom'
import './about.css'
function About(props) {
    // 执行useNavigate函数，该函数会返回一个函数，使用返回的函数进行路由跳转
    const navigate = useNavigate()
    const goHome = () => {
        // 跳转到首页
        // 第一个参数是路由地址
        // 第二个参数是配置对象，在配置对象中通过replace属性设置是否携带页面栈跳转
        navigate('/',{replace:true})
    }
    const goCity = (id) => {
        navigate('/city?id=' + id)
    }
    return (
        <div className='about'>
            {/* 编程式导航 */}
            <button onClick={goHome}>回到首页</button>
            <ul>
                {/* searchParams传参 */}
                <li><Link to='/city?id=1'>南京</Link></li>
                <li><Link to='/city?id=2'>合肥</Link></li>
                <li>
                    {/* 编程式导航 */}
                    <button onClick={()=>{goCity(3)}}>杭州</button>
                </li>
            </ul>

            <ul>
                {/* searchParams传参 */}
                <li><Link to='/phone/1'>苹果</Link></li>
                <li><Link to='/phone/2'>华为</Link></li>
                <li><Link to='/phone/3'>小米</Link></li>
            </ul>
        </div>
    );
}

export default About;
